// @import './placeholder-variables'

.q-placeholder2
  position relative
  overflow: hidden;
  background-color var(--placeholder-bgcolor, #fff)
  min-width: 50%;
  pointer-events: none;
  user-select: none;

  &__sidebar
    margin-right 16px

  &__avatar
    background-color var(--placeholder-color, #eee)
    vertical-align top
    width 100%
    height 100%

    &--circle
      border-radius 50%

  &__content
    width 100%

  &__title
    background-color var(--placeholder-color, #eee)
    margin-top 16px
    height 16px
    width 100%
    margin-block-start .5em
    margin-block-end .5em

  &__paragraph
    outline none
    list-style none
    margin-block-start 0
    margin-block-end 0
    margin-inline-start 0
    margin-inline-end 0
    padding-inline-start 0

  &__line
    background-color var(--placeholder-color, #eee)
    height 16px
    width 100%
    margin 0
    padding 0

    &:last-child
      margin-bottom .5em

  &__row
    display flex
    flex-direction row
    flex-wrap nowrap
    width 100%
    // border 1px solid black

  &__column
    display flex
    flex-direction column
    flex-basis 100%
    flex 1
    // border 1px solid black

  &__mask
    background-color var(--placeholder-bgcolor, #fff)

  &__divider
    background-color var(--placeholder-bgcolor, #fff)

  &__animated-background
    background linear-gradient(to right, var(--placeholder-color, #eee) 8%, var(--placeholder-shimmercolor, #ddd) 18%, var(--placeholder-color, #eee) 33%)
    animation q-placeholder2__shimmer 1.4s ease infinite
    background-size 1000% 100%
    animation-duration 2s

@keyframes q-placeholder2__shimmer
  0%{
    background-position 100% 50%
  }
  100%{
    background-position 0 50%
  }

